<template>
	<view class="wrapper souSuo">
		<div class="center input-box mb50">
			<input type="text" placeholder="请输入关键词" class="flex1 f28" placeholder-class="c999" v-model="keyword" />
			<image src="../../../static/shouye/search.png" mode="widthFix" class="search-icon"></image>
		</div>
		<div class="title f32 mb5">服务列表</div>
		<!-- 搜索结果 -->
		<scroll-view class="scroll-main" scroll-y="true">
			<div class="result-box f28 center posr mt30" v-for="v in 20" @click="open('./shenQing')">
				<div class="flex1 nowrap">城乡居民养老保险参保登记</div>
				<div class="posa f20 cfff">预约</div>
			</div>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: ''
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.scroll-main{
		height: calc(100vh - 290rpx);
		/* #ifndef H5 */
		height: calc(100vh - 220rpx);
		/* #endif */
	}
	.result-box {
		padding: 34rpx 40rpx;
		background: #F1F9FE;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;

		.posa {
			top: 0;
			right: 0;
			padding: 2rpx 26rpx;
			background: linear-gradient(180deg, #1078FF 0%, #62A4FE 100%);
			border-radius: 0rpx 12rpx 0rpx 12rpx;
		}
	}

	.title {
		border-left: 6rpx solid #0077FF;
		padding-left: 8rpx;
		margin-left: 24rpx;
		line-height: 32rpx;
	}

	.delete-icon {
		width: 31.5rpx;
		height: 33.7rpx;
	}

	.input-box {
		width: 672rpx;
		height: 74rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		border: 2rpx solid #E6E6E6;
		padding: 0 18rpx 0 22rpx;

		.search-icon {
			width: 37rpx;
			height: 37rpx;
		}
	}

	.souSuo {
		padding: 38rpx 38rpx 0;
		overflow: hidden;
		height: 100%;
	}
</style>